<template>
  <!-- 转派 -->
  <div class="todo_detail">
    <div class="selectContent" @click="changeSeach">
      <van-search left-icon="" right-icon="search" placeholder="请筛选" shape="round" />
      <div style="width: 140px; color: #666666">
        <img src="./img/icon_sx.png" alt="" width="16" height="16" /> <span style="margin: 0 20px 0 4px">筛选 </span>
        <van-icon name="arrow-down" color="#cecece" />
      </div>
    </div>
    <van-popup v-model="showSource" round position="bottom">
      <div class="popTitle"><img src="./img/icon_sx_b.png" alt="" width="16" height="16" /> 筛选</div>
      <van-form >
        <popupSelect
          :searchKey="'bqCode'"
          @valueObject="getValue"
          :columns="villageCodeLists"
          fieldClass="field"
          input-align="right"
          clearable
          label="包区名称"
          placeholder="请选择"
          :labelKey="'bqName'"
          :valueKey="'bqId'"
        >
        </popupSelect>
        <popupSelect
          :searchKey="'villageCode'"
          @valueObject="getValue"
          :columns="bqCodeLists"
          fieldClass="field"
          input-align="right"
          clearable
          label="目标市场名称"
          placeholder="请选择"
          :labelKey="'villageName'"
          :valueKey="'villageId'"
        >
        </popupSelect>
        <van-field v-model="orderId" input-align="right" label="订单号" placeholder="请输入" clearable />
        <van-field v-model="dealId" input-align="right" label="处理人工号" placeholder="请输入" clearable />
        <van-field v-if="active == '1'" v-model="businessNumber" input-align="right" label="业务号码" placeholder="请输入" clearable />
        <div style="margin: 16px; display: flex">
          <van-button round block type="default" native-type="submit" @click="onReset">重置</van-button>
          <van-button round block type="info" native-type="submit" @click="onSearch">查询</van-button>
        </div>
      </van-form>
    </van-popup>

    <div class="content">
      <van-list v-if="active == '1'" v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <div class="item_content" v-for="(item, indexs) in orderlists" :key="indexs">
          <div class="title">
            <div class="number">
              <img src="./img/icon_title.png" alt="" />
              <div :class="isSelectIdx == indexs ? 'acitve' : ''">订单号：{{ item.orderNumber }}</div>
            </div>
            <div class="btn" @click="handleDispatch(item, indexs)">转派</div>
          </div>
          <div class="reason">
            <div>转派理由：</div>
            <div>{{ item.redeployReason }}</div>
          </div>
          <div class="deatil_content" v-if="!item.isShow">
            <div :class="its.class" v-for="(its, idx) in contentOrder">
              <div class="">
                <div class="label">
                  <van-icon name="circle" size="8" color="#2288FF" class="mr-4" /> <span>{{ its.label }}</span>
                </div>
                <div class="value">{{ item[its.key] }}</div>
              </div>
            </div>
          </div>
          <div class="deatil_content" v-else>
            <div :class="its.class" v-for="(its, idx) in contentOrder.slice(0, 2)">
              <div class="">
                <div class="label">
                  <van-icon name="circle" size="8" color="#2288FF" class="mr-4" /> <span>{{ its.label }}</span>
                </div>
                <div class="value">{{ item[its.key] }}</div>
              </div>
            </div>
          </div>
          <div class="showDiv" v-if="!item.isShow" @click="onToggle(item)"><van-icon name="arrow-up" /> 收起</div>
          <div class="showDiv" v-else @click="onToggle(item)"><van-icon name="arrow-down" /> 展开</div>
        </div>
      </van-list>
      <van-list v-else v-model="loadingZPD" :finished="finishedZPD" finished-text="没有更多了" @load="onLoad">
        <div class="item_content" v-for="(item, indexs) in orderZPDlists" :key="indexs">
          <div class="title">
            <div class="number">
              <img src="./img/icon_title.png" alt="" />
              <div :class="isSelectIdx == indexs ? 'acitve' : ''">订单号：{{ item.orderNumber }}</div>
            </div>
            <div class="btn" @click="handleDispatch(item, indexs)">转派</div>
          </div>
          <div class="reason">
            <div>转派理由：</div>
            <div>{{ item.redeployReason }}</div>
          </div>
          <div class="deatil_content" v-if="!item.isShow">
            <div :class="its.class" v-for="(its, idx) in contentOrder">
              <div class="">
                <div class="label">
                  <van-icon name="circle" size="8" color="#2288FF" class="mr-4" /> <span>{{ its.label }}</span>
                </div>
                <div class="value">{{ item[its.key] }}</div>
              </div>
            </div>
          </div>
          <div class="deatil_content" v-else>
            <div :class="its.class" v-for="(its, idx) in contentOrder.slice(0, 2)">
              <div class="">
                <div class="label">
                  <van-icon name="circle" size="8" color="#2288FF" class="mr-4" /> <span>{{ its.label }}</span>
                </div>
                <div class="value">{{ item[its.key] }}</div>
              </div>
            </div>
          </div>
          <div class="showDiv" v-if="!item.isShow" @click="onToggle(item)"><van-icon name="arrow-up" /> 收起</div>
          <div class="showDiv" v-else @click="onToggle(item)"><van-icon name="arrow-down" /> 展开</div>
        </div>
      </van-list>
    </div>
    <van-popup v-model="showClassify" round position="bottom">
      <detail ref="detailDialogRef" :content="record" @reload="searchQuery" />
    </van-popup>
  </div>
</template>
        
<script>
import store from '@/store/'
import { mapState } from 'vuex'
import { villageCodeList, bqCodeList, zjdList, zpdList } from '@/api/publicline/orderDispatch.js'
import { contentOrderZJD,contentOrderZPD } from './common'
import detail from './detail'
import popupSelect from '@/components/popupSelect'
import Vue from 'vue'

export default {
  name: 'orderList',
  props: {
    active: String,
  },
  components: { popupSelect, detail },
  data() {
    return {
      orderlists: [],
      orderZPDlists: [],
      villageCodeLists: [],
      bqCodeLists: [],
      sourceId: '',
      value1: '全部',
      classifyId: '',
      value2: '全部',
      contentOrder:[],
      columns1: [
        { label: '服务开通系统', value: '1' },
        { label: '智家中台', value: '2' },
        { label: '联通公众', value: '3' },
      ],
      sourceList: [],
      classifyList: [],
      selectType: '0',
      showSource: false,
      showClassify: false,
      loading: false,
      finished: false,
      loadingZPD: false,
      finishedZPD: false,
      isShow: false,
      showPicker: false,
      bqCode: '',
      villageCode: '',
      orderId: '',
      dealId: '',
      businessNumber:'',
      pageNum: 1,
      pageSize: 10,
      gridCode: null,
      record: null,
    }
  },
  computed: {
    ...mapState({
      // 后台菜单
      isSelectIdx: (state) => state.todoread.isAcive,
    }),
  },
  mounted() {
    this.gridCode = localStorage.getItem('$gridId')
    this.pageNum = 1
    this.pageSize = 10
    this.onSearch()
  },
  methods: {
    getValue(obj) {
      this[obj.key] = obj.value
    },
    // ...mapGetters(["isAcive"]),
    onClickLeft() {
      this.$router.push({
        path: '/publicline/index',
      })
      store.commit('SET_ISACTIVE', null)
    },
    async getVillageCodeList() {
      const res = await villageCodeList({ gridCode: this.gridCode })
      const { result, success } = res
      if (success) {
        this.villageCodeLists = result
      }
    },
    async getBqCodeList() {
      const res = await bqCodeList({ gridCode: this.gridCode })
      const { result, success } = res
      if (success) {
        this.loading = false
        this.bqCodeLists = result
      }
    },
    handleDispatch(items, idx) {
      this.showClassify = true
      this.record = { gridCode: this.gridCode, ...items, type: this.active }
      store.commit('SET_ISACTIVE', idx)
      store.commit('SET_SELECTORDER', null)
      this.$nextTick(() => {
        this.$refs.detailDialogRef.handleTab(0)
      })
    },
    onToggle(item) {
      item.isShow = !Boolean(item.isShow)
      this.$set(item, 'isShow', item.isShow)
    },
    changeSeach() {
      // this.selectType = '0'
      this.showSource = true
      this.getBqCodeList()
      this.getVillageCodeList()
    },
    onReset() {
      this.bqCode = ''
      this.villageCode = ''
      this.orderId = ''
      this.dealId = ''
      if(this.active=='1'){
        this.businessNumber=''
      }
    },
    onSearch() {
      this.pageNum = 1
      this.pageSize = 10
      this.orderZPDlists.length = 0
      this.orderlists.length = 0
      if (this.active == '1') {
        this.contentOrder=contentOrderZJD
        this.getZjdList()
      } else {
        this.contentOrder=contentOrderZPD
        this.getZpdList()
      }
      this.showSource = false
      store.commit('SET_ISACTIVE', null)
    },
    async getZjdList() {
      let params = {
        gridCode: this.gridCode,
        bqCode: this.bqCode,
        villageCode: this.villageCode,
        orderId: this.orderId,
        dealId: this.dealId,
        businessNumber:this.businessNumber,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      }
      this.loading = true
      // this.orderlists.length = 0
      const res = await zjdList({ ...params })
      const { result, success } = res
      if (success) {
        this.loading = false
        if (result) {
            this.orderlists.push(...res.result.list)
          // 加载状态结束
          this.loading = false
          this.finished = res.result.list.length < this.pageSize
        } else {
          this.orderlists.length = 0
        }
      }
      this.onReset()
    },
    async getZpdList() {
      console.log('zpd')
      // this.loadingZPD = true
      this.orderlists.length = 0
      let params = {
        gridCode: this.gridCode,
        bqCode: this.bqCode,
        villageCode: this.villageCode,
        orderId: this.orderId,
        dealId: this.dealId,
        page: this.pageNum,
        pageSize: this.pageSize,
      }
      this.loadingZPD = true

      const res = await zpdList({ ...params })
      const { data, code } = res
      if (!data||data.data.length == 0) {
        this.finishedZPD = true
      } else {
          this.orderZPDlists.push(...res.data.data)
          // 加载状态结束
          this.loading = false
          this.finishedZPD =res.data.data.length < this.pageSize
      }
      this.onReset()

    },
    onLoad() {
      setTimeout(() => {
        if (this.active == '1') {
          this.pageNum += 1
          this.getZjdList()
        } else {
          this.pageNum += 1
          this.getZpdList()
        }
        // this.getGridDispatch()
      }, 1000)
    },
    searchQuery() {
      this.onSearch()
      this.showClassify = false
    },
  },
}
</script>
<style lang="less" scoped>
.acitve {
  color: #5972fa !important;
}
.todo_detail {
  // display: none;
  // background: #fff;
  padding: 2px 0 8px 0;
  // margin-top: 40px;
  .selectContent {
    background: #fff;
    // padding: 8px 10px 8px 10px;
    border-top: 1px solid #dddada;
    display: flex;
    align-items: center;
    margin-top: 88px;
    position: fixed;
    width: 100%;
    z-index: 9;
    height: 54px;
    div {
      width: 100%;
      display: flex;
      align-items: center;
      font-size: 14px;
      color: #666666;
      // .system{
      //   width: 86%;
      // }
    }
    .classify {
      // border: 1px solid #000;
      border-left: 1px solid #dddada;
      padding-left: 10px;
    }
  }
  .content {
    // overflow-y: auto;
    // margin-top: 124px;
    margin-top: 146px;
    margin-bottom: 34px;
    .item_content {
      background-image: linear-gradient(180deg, #ffffff 0%, #f0f7ff 100%);
      border-radius: 4px;
      // background: #fff;
      margin: 10px 0;
      // padding-bottom: 8px;
      .title {
        display: flex;
        align-items: center;
        padding: 8px 10px;
        justify-content: space-between;
        .number {
          display: flex;
          align-items: center;
          font-size: 16px;
          color: #333333;
          letter-spacing: 0;
          font-family: PingFangSC-Medium;
          font-weight: 600;
          margin-left: 6px;
        }
        .btn {
          width: 60px;
          background-image: linear-gradient(90deg, #7ab2ff 1%, #4d98ff 100%);
          color: #fff !important;
          text-align: center;
          font-size: 14px;
          border-radius: 10px;
        }
        // div {
        //   margin-left: 10px;
        //   font-size: 16px;
        //   color: #333333;
        //   letter-spacing: 0;
        //   font-family: PingFangSC-Medium;
        //   font-weight: 600;
        // }
      }
      .staus_content {
        width: 110px;
        margin-left: 30px;
        // display: flex;
        // align-items: center;
        // justify-content: space-around;
        padding-bottom: 6px;
        font-size: 12px;
        .status0 {
          padding: 0 4px;
          color: #6e79fd;
          border: 1px solid #6e79fd;
        }
        .status1 {
          padding: 0 4px;
          color: #41c2bf;
          border: 1px solid #41c2bf;
        }
        // .time {
        //   color: #999999;
        // }
      }
      .reason {
        display: flex;
        margin-left: 30px;
        color: #999999;
        padding-bottom: 8px;
        font-size: 12px;
        div {
          min-width: 60px;
          margin-right: 8px;
        }
      }
      .w-c100 {
        width: calc(100% - 24px);
        margin-left: 24px;
        margin-bottom: 10px;
      }
      .w-c50 {
        width: calc(50% - 24px);
        margin-left: 24px;
        margin-bottom: 10px;
      }
      .w-c50:nth-child(odd) {
        width: calc(50% - 24px);
        margin-left: 24px;
        margin-bottom: 10px;
        border-right: 1px solid #eeeeee;
      }
      .deatil_content {
        display: flex;
        flex-wrap: wrap;
        // align-items: center;
        // justify-content: space-around;
        // padding-bottom: 6px;

        .items {
          //   width: calc(50% - 10px);
          //   margin-left: 10px;
          .line_item {
            display: flex;
          }
          .m0 {
            // width: 70%;
            margin: 0 auto;
          }
          .line {
            border-left: 1px solid #dbecff; /* 分割线的样式，可以自定义颜色和宽度 */
            border-right: 1px solid #dbecff; /* 分割线的样式，可以自定义颜色和宽度 */
            // width: 1px; /* 分割线的长度 */
            height: 20px;
            // line-height: 44px;
            margin: 12px 0;
          }
        }
        .mr-4 {
          margin-right: 4px;
        }
        .label {
          display: flex;
          align-items: center;
          span {
            font-size: 12px;
            color: #666666;
          }
        }
        .value {
          font-size: 13px;
          margin-top: 2px;
          margin-left: 12px;
          margin-right: 10px;
        }
      }

      .showDiv {
        color: #2288ff;
        text-align: center;
        border-bottom: 1px solid rgba(223, 237, 255, 0.6);
      }
    }
  }
}
.popTitle {
  padding: 14px;
  font-size: 18px;
  color: #333333;
  letter-spacing: 0;
}

//   /deep/
</style>
        